<template>
  <h2>个人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive,toRefs} from 'vue'
export default {
  name: "Demo",
  setup(){
    //数据
    let person=reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })


    console.log("-------------------------------------")
    const x=toRefs(person)
    console.log("toRefs(person)",x)

    //返回一个对象（常用）
    return{
      //toRefs返回的是一个对象，所以不能直接对象包对象，应该将两个对象合并
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>
</style>
